<template>
  <div class="clearfix">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button
              v-if="accreditChildren.createOrg"
              icon="el-icon-plus"
              :disabled="!handleSelect.id"
              @click="addOreditor('create')"
            >新增</el-button>
            <el-button
              v-if="accreditChildren.editOrg"
              icon="el-icon-edit"
              :disabled="!handleSelect.id"
              @click="addOreditor('editor')"
            >编辑</el-button>
            <el-button
              v-if="accreditChildren.delOrg"
              icon="el-icon-delete"
              :disabled="!handleSelect.id"
              @click="deleteOrg"
            >删除</el-button>
          </div>
          <div class="userScroll" style="height:400px;overflow:auto">
            <el-tree
              :data="data"
              :highlight-current="true"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="clearfix">
              <span class="left">"{{ userCategory }}"用户数({{ totalCount }})</span>
              <div class="right">
                <el-input
                  v-model="searInfo.keyword"
                  placeholder="用户账号/姓名"
                  style="width:160px;marginRight:3px;"
                />
                <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
              </div>
            </div>
            <!-- <el-button type="primary" size="mini" @click="createUser">添加用户</el-button> -->
          </div>
          <el-table :data="tableData" border style="width: 100%;margin-top:15px;">
            <el-table-column label="所属部门">
              <template slot-scope="scope">{{ scope.row.id ? scope.row.orgName :'&nbsp;' }}</template>
            </el-table-column>
            <el-table-column prop="userCode" label="用户编号" />
            <el-table-column prop="userName" label="用户姓名" />
            <el-table-column label="操作" width="100px">
              <template slot-scope="scope">
                <div v-if="scope.row.id">
                  <span
                    style="color:rgb(64, 158, 255);margin-right:15px;cursor:pointer;"
                    @click="editorUser(scope.row)"
                  >编辑</span>
                  <span
                    style="color:rgb(245, 108, 108);cursor:pointer;"
                    @click="deleteUser(scope.row)"
                  >删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="clearfix" style="marginTop:15px;">
            <Pagination
              class="right"
              :total-count="totalCount"
              :page-size="page.pageSize"
              :current-page="page.pageNo"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--用户弹出框开始-->
    <el-dialog
      :close-on-click-modal="false"
      title="编辑用户部门"
      :visible.sync="dialogVisible1"
      width="600px"
      :before-close="handleClose1"
    >
      <el-form ref="form" :model="editorUserOrg" label-width="80px">
        <el-form-item label="所属部门">
          <el-popover v-model="visible2" placement="bottom" trigger="click" width="220">
            <el-tree
              :data="data"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              @node-click="handleNodeClick1"
            />
            <el-input slot="reference" :value="editorUserOrg.orgName" />
          </el-popover>
          <!-- <el-input v-model="editorUserOrg.orgId"></el-input> -->
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input v-model="editorUserOrg.userCode" disabled />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="editorUserOrg.userName" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitValSure">确 定</el-button>
      </span>
    </el-dialog>
    <!--用户弹出框开始-->
    <!--部门弹出框开始-->
    <el-dialog
      center
      :close-on-click-modal="false"
      :title="selectVal.create ? '创建部门' : '编辑部门'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form11" :model="selectVal" label-width="80px" :rules="rules">
        <el-form-item label="上级部门" prop="parentNode">
          <el-input v-model="selectVal.parentNode" disabled />
        </el-form-item>
        <el-form-item label="部门编号" prop="orgCode">
          <el-input v-model="selectVal.orgCode" :disabled="!selectVal.create" />
        </el-form-item>
        <el-form-item label="部门名称" prop="orgName">
          <el-input v-model="selectVal.orgName" />
        </el-form-item>
        <el-form-item label="排序号" prop="listOrder">
          <el-input v-model="selectVal.listOrder" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitVal">确 定</el-button>
      </span>
    </el-dialog>
    <!--部门弹出框结束-->
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl';
import {
  reduceArr,
  createDics,
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods1,
  _searchInfo
} from '~/utils/util';
import rule from '~/utils/regular';
import Pagination from '~/components/commom/pagination';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      userCategory: '全部',
      accreditArr: [],
      accreditChildren: {},
      draggableArr: [],
      dialogVisible1: false, // 用户弹出框
      visible2: false, // 弹出框输入树
      editorUserOrg: {},
      rules: {
        parentNode: rule.require,
        orgCode: rule.require,
        orgName: rule.require,
        listOrder: rule.sort
      },
      selectVal: {
        // 表单提交的值
        id: '',
        listOrder: '',
        orgCode: '',
        orgName: '',
        parentId: '',
        parentNode: '',
        create: true
      },
      searInfo: {
        keyword: '',
        orgId: ''
      },
      copysearInfo: {
        keyword: '',
        orgId: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      getInfoUser: {
        keyword: '',
        page: {
          maxResultCount: 0,
          pageNo: 0,
          pageSize: 10,
          skipCount: 0
        }
      },
      totalCount: 0,
      tableData: [], // 表单
      handleSelect: {},
      dialogVisible: false, // 部门弹出框
      data: [],
      defaultProps: {
        children: 'children',
        label: 'orgName'
      }
    }
  },
  mounted() {
    this.getInitData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    submitValSure() {
      const item = {
        orgId: this.editorUserOrg.orgId,
        orgIdPath: this.editorUserOrg.orgIdPath,
        id: this.editorUserOrg.id
      }
      this.$post({
        url: mmUrl.orgUser.editor,
        data: {
          item
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.dialogVisible1 = false
      })
    },
    handleNodeClick1(data) {
      // 弹出框Input树
      this.visible2 = false
      this.editorUserOrg.orgName = data.orgName
      this.editorUserOrg.orgIdPath = data.orgIdPath
      this.editorUserOrg.orgId = data.id
    },
    createUser() {
      this.sureHandleSelect().then(() => {
        this.$post({
          url: mmUrl.orgUser.getUser,
          data: this.getInfoUser
        }).then(res => {
          this.draggableArr = res.items.items
          this.dialogVisible1 = true
        })
      })
    },
    editorUser(res) {
      this.editorUserOrg = res
      this.dialogVisible1 = true
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.orgUser.get, res, that)
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    deleteUser(res) {
      const that = this
      _deleteMethods1(mmUrl.orgUser.delete, res, that).then(() => {
        that.searchInfoMation('no')
      })
    },
    handleSizeChange(res) {
      const result = _sizeChange(res, this.page, this.searInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(res) {
      const result = _currentChange(res, this.page, this.searInfo)
      this.changeTableData(result)
    },
    submitVal() {
      this.dialogVisible = false
      const status = this.selectVal.create
      this.$post({
        url: status ? mmUrl.orgManage.create : mmUrl.orgManage.editor,
        data: {
          item: this.selectVal
        }
      }).then(res => {
        this.getInitData()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$refs['form11'].resetFields()
    },
    handleClose1() {
      this.dialogVisible1 = false
    },
    handleNodeClick(res) {
      this.handleSelect = res
      this.userCategory = res.parentId ? res.orgName : '全部';
      this.searInfo.orgId = typeof res.id === 'string' ? res.id : '';
      this.searchInfoMation()
    },
    addOreditor(res) {
      this.sureHandleSelect()
        .then(() => {
          if (res !== 'create') {
            this.selectVal = {
              create: false,
              id: this.handleSelect.id,
              listOrder: this.handleSelect.listOrder,
              orgCode: this.handleSelect.orgCode,
              orgName: this.handleSelect.orgName,
              parentId: this.handleSelect.parentId,
              parentNode: this.handleSelect.orgNamePath.split('/').reverse()[1]
            }
          } else {
            this.selectVal = {
              create: true,
              listOrder: '',
              orgCode: '',
              orgName: '',
              parentId: this.handleSelect.id,
              parentNode: this.handleSelect.orgName
            }
          }
          this.dialogVisible = true
        })
        .catch()
    },
    deleteOrg() {
      this.sureHandleSelect().then(() => {
        this.$post({
          url: mmUrl.orgManage.delete,
          data: {
            id: this.handleSelect.id
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getInitData()
        })
      })
    },
    sureHandleSelect() {
      return new Promise(resolve => {
        if (!this.handleSelect.id) {
          this.$message.error('请先选择部门')
        } else {
          resolve()
        }
      })
    },
    getInitData() {
      this.$post({
        url: mmUrl.orgManage.get,
        data: {}
      }).then(res => {
        this.data = res
      })
    }
  }
}
</script>
<style lang='scss' module>
.top_search {
  margin-bottom: 12px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
}
</style>
